<template>
  <div class="learning-path-list">
    <div class="container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">学习路径</h1>
        <p class="page-desc">系统化的学习路线，助你快速掌握技能</p>
      </div>

      <!-- 筛选栏 -->
      <div class="filter-bar">
        <el-select v-model="filter.category" placeholder="选择方向" clearable>
          <el-option
            v-for="item in categories"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="filter.level" placeholder="难度等级" clearable>
          <el-option
            v-for="item in levels"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="filter.keyword"
          placeholder="搜索学习路径"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>

      <!-- 学习路径列表 -->
      <div class="path-grid">
        <el-row :gutter="20">
          <el-col :span="8" v-for="path in filteredPaths" :key="path.id">
            <el-card class="path-card" @click="router.push(`/learning-path/${path.id}`)">
              <div class="path-header">
                <img :src="path.cover" class="path-cover" />
                <div class="path-tags">
                  <el-tag size="small" :type="path.isNew ? 'success' : 'info'">
                    {{ path.isNew ? '新上线' : '热门' }}
                  </el-tag>
                  <el-tag size="small" type="warning">{{ path.level }}</el-tag>
                </div>
              </div>
              <h3 class="path-title">{{ path.title }}</h3>
              <p class="path-desc">{{ path.description }}</p>
              <div class="path-stats">
                <div class="stat-item">
                  <span class="stat-value">{{ path.courseCount }}</span>
                  <span class="stat-label">课程</span>
                </div>
                <div class="stat-item">
                  <span class="stat-value">{{ path.studentCount }}</span>
                  <span class="stat-label">学习人数</span>
                </div>
                <div class="stat-item">
                  <span class="stat-value">{{ path.duration }}</span>
                  <span class="stat-label">学习周期</span>
                </div>
              </div>
              <div class="path-footer">
                <div class="path-progress">
                  <el-progress
                    :percentage="path.progress"
                    :format="format"
                    :stroke-width="8"
                  />
                </div>
                <el-button type="primary" size="small">开始学习</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[9, 18, 27, 36]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'

const router = useRouter()

// 筛选条件
const filter = ref({
  category: '',
  level: '',
  keyword: ''
})

// 分类选项
const categories = [
  { value: 'frontend', label: '前端开发' },
  { value: 'backend', label: '后端开发' },
  { value: 'ui', label: 'UI设计' },
  { value: 'ai', label: '人工智能' }
]

// 难度等级
const levels = [
  { value: 'beginner', label: '入门' },
  { value: 'intermediate', label: '中级' },
  { value: 'advanced', label: '高级' }
]

// 分页配置
const pagination = ref({
  currentPage: 1,
  pageSize: 9,
  total: 100
})

// 学习路径数据
const paths = ref([
  {
    id: 1,
    title: 'Vue.js 全栈开发工程师',
    description: '从零开始，系统学习Vue.js全栈开发，掌握前后端分离开发技能',
    cover: 'https://picsum.photos/400/200?random=1',
    isNew: true,
    level: '中级',
    courseCount: 12,
    studentCount: 3456,
    duration: '3个月',
    progress: 0,
    category: 'frontend'
  },
  {
    id: 2,
    title: 'React 高级开发工程师',
    description: '深入学习React核心概念和高级特性，成为React开发专家',
    cover: 'https://picsum.photos/400/200?random=2',
    isNew: false,
    level: '高级',
    courseCount: 15,
    studentCount: 2345,
    duration: '4个月',
    progress: 30,
    category: 'frontend'
  },
  // ... 更多学习路径数据
])

// 根据筛选条件过滤学习路径
const filteredPaths = computed(() => {
  return paths.value.filter(path => {
    if (filter.value.category && path.category !== filter.value.category) {
      return false
    }
    if (filter.value.level && path.level !== filter.value.level) {
      return false
    }
    if (filter.value.keyword) {
      const keyword = filter.value.keyword.toLowerCase()
      return (
        path.title.toLowerCase().includes(keyword) ||
        path.description.toLowerCase().includes(keyword)
      )
    }
    return true
  })
})

// 处理搜索
const handleSearch = () => {
  pagination.value.currentPage = 1
  // TODO: 实现搜索逻辑
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  pagination.value.pageSize = val
  // TODO: 重新加载数据
}

// 处理页码变化
const handleCurrentChange = (val) => {
  pagination.value.currentPage = val
  // TODO: 重新加载数据
}

// 格式化进度条文本
const format = (percentage) => {
  return percentage === 0 ? '未开始' : `${percentage}%`
}
</script>

<style scoped>
.learning-path-list {
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 12px;
}

.page-desc {
  font-size: 16px;
  color: var(--text-secondary);
}

.filter-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.filter-bar .el-select {
  width: 160px;
}

.filter-bar .el-input {
  width: 240px;
}

.path-grid {
  margin-bottom: 24px;
}

.path-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.path-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.path-header {
  position: relative;
  margin: -20px -20px 20px;
}

.path-cover {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.path-tags {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.path-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

.path-desc {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 16px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.path-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.path-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.path-progress {
  flex: 1;
  margin-right: 16px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
</style> 